<template>
  <div class="card alarm-record">
    <div class="card-bg alarm-record-bg">
      <img class="card-top alarm-record-top" src="../assets/callThePoliceUp.png" />
      <div class="card-middle alarm-record-center"></div>
      <img class="card-bottom alarm-record-bottom" src="../assets/callThePoliceDown.png" />
    </div>
    <div class="two-element">
      <span class="title">{{ title }}</span>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  color: #fff;
  font-size: 0.938vw;
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.card-top,
.card-bottom {
  width: 100%;
  min-height: 0;
}
.alarm-record {
  height: 13.704vh;
  margin-bottom: 1.852vh;
}

.alarm-record-center {
  background-image: url('../assets/callThePoliceCentre.png');
  height: 1.759vh;
}

.title {
  padding-left: 2.708vw;
  position: relative;
}

.title::before {
  display: inline-block;
  content: "";
  height: 0.417vw;
  width: 0.417vw;
  border-radius: 50%;
  background-color: #4cf393;
  position: absolute;
  left: 2.031vw;
  top: 50%;
  transform: translate(-50%, -50%);
}

.two-element {
  line-height: 5vh;
  position: relative;
  z-index: 10;
}
</style>
